@extends('layout.page')
@section('title','广告管理 - 创建')
@section('stylesheet')
    <link href="/css/plugins/spectrum/spectrum.css?v=4.1.0" rel="stylesheet">
    <link href="/css/plugins/webUploader/webuploader.css" rel="stylesheet">
    <link href="/css/plugins/webUploader/style33.css" rel="stylesheet">
@endsection

@section('static-page')
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>广告管理 <small>添加</small></h5>
            </div>
            <div class="ibox-content">
                <form method="post" action="/ceb/advertistment/doCreate" class="form-horizontal">
                    {{csrf_field()}}
                    <input type="hidden"  name="info[platformType]" value="{{$platform}}">
                    <div class="form-group  ">
                        <label class="col-sm-2 control-label">名称：</label>
                        <div class="col-sm-6">
                            <div class="row">
                                <div class="col-md-8">
                                    <input type="text"  name="info[title]" value=""
                                           placeholder="名称" class="form-control">
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">图片</label>
                        <div class="col-sm-10">
                            <div id="upload-btn" style="height: 30px;">上传图片</div>
                        </div>
                        <label class="control-label col-sm-2">预览:</label>
                        <div class="col-sm-10">
                            <img  id="img-thumb" src="">
                        </div>
                        <div class="col-sm-10">
                            <input name="info[img]" class="hidden" type="text"
                                   value="">
                            <span class="help-block m-b-none"></span>
                        </div>

                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">类型：</label>
                        <div class="col-sm-2">
                            <div class="row">
                                <div class="col-md-12 m-b-xs">
                                    <select  name="info2[type]" id="abc" class="form-control input-s-sm inline">
                                        @foreach($map_type as $key => $val)
                                            <option @if($typeCustom == $val['id'] ) selected @endif value="{{ $val['id'] }}">{{ $val['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-5 pull-left" id="cutom-url-container">
                            <div class="row">
                                <div class="col-md-12 m-b-xs">
                                    <input type="text" name="info[jumpUrl]" value=""
                                           placeholder="自定义链接" class="form-control">
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group" style="display: none" id="target-group">
                        <label class="col-sm-2 control-label">>：</label>
                        <div class="col-sm-6">
                            <div class="row">
                                <div id="tab-1" style="height: 200px" >
                                    <div  id="loading"  style="display: none">
                                        <div class="sk-spinner sk-spinner-wave">
                                            <div class="sk-rect1"></div>
                                            <div class="sk-rect2"></div>
                                            <div class="sk-rect3"></div>
                                            <div class="sk-rect4"></div>
                                            <div class="sk-rect5"></div>
                                        </div>
                                    </div>
                                    <div class="full-height-scroll" id="target-list-container">

                                        <div class="radio">
                                            <label>
                                                <input class="i-checks" type="radio" value="option2" id="optionsRadios2" name="optionsRadios">选项2</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <button id="cur-page" data-val="1" style="display: none"></button>
                                    <button class="btn btn-white _clik-page" type="button" data-val="1" id="per-page">上一页</button>
                                    <button class="btn btn-white _clik-page" type="button" data-val="1" id="next-page">下一页</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">显示位置：</label>
                        <div class="col-sm-4">
                            <div class="row">
                                <div class="col-md-4 m-b-xs">
                                    <select name="info[adtype]" class="form-control input-s-sm inline">
                                        @foreach($map_location as $key => $val)
                                            <option  value="{{ $val['id'] }}">{{$val['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group " >
                        <label class="col-sm-2 control-label">显示时长：</label>
                        <div class="col-sm-4">
                            <div class="row">
                                <div class="col-md-6 m-b-xs">
                                    <input type="text" name="info[dur]" value=""
                                           placeholder="显示时长" class="form-control">
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group  ">
                        <label class="col-sm-2 control-label">版本区间：</label>
                        <div class="col-sm-6">
                            <div class="row">

                                <div class="col-md-4 m-b-xs">
                                    <select name="version[1]" class="form-control input-s-sm inline" id="version-down">
                                        @foreach($versionList as $key => $val)
                                            <option @if($key !=0) disabled @endif  value="{{ $val }}">{{$val}}</option>
                                        @endforeach
                                    </select>
                                    <span class="help-block m-b-none">下区间 小</span>
                                </div>
                                <div class="col-sm-1 m-b-xs">---</div>
                                <div class="col-md-4 m-b-xs">
                                    <select name="version[0]" class="form-control input-s-sm inline" id="version-up">
                                        @foreach($versionList as $key => $val)

                                            <option value="{{ $val }}">{{$val}}</option>
                                        @endforeach
                                    </select>
                                    <span class="help-block m-b-none ">上区间 大</span>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group  ">
                        <label class="col-sm-2 control-label">背景颜色(PC)：</label>
                        <div class="col-sm-4">
                            <div class="row">
                                <div class="col-md-6 m-b-xs">
                                    <input type="text" class="_color-selecter" name="info[backgroud_color]" value=""
                                           placeholder="排序" class="form-control">
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group  ">
                        <label class="col-sm-2 control-label">排序：</label>
                        <div class="col-sm-4">
                            <div class="row">
                                <div class="col-md-6 m-b-xs">
                                    <input type="text" name="info[orders]" value=""
                                           placeholder="排序" class="form-control">
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-2">
                            <button class="btn btn-primary" type="button" id="btn-save">保存内容</button>
                            <a href="javascript:void(0);" onclick="window.history.back()">
                                <button class="btn btn-white" type="button">取消</button>
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="/js/webuploader.min.js"></script>
    <!-- Input Mask-->
    <script src="/js/plugins/inputmask/inputmask.js"></script>
    <script src="/js/plugins/inputmask/inputmask.date.extensions.js"></script>
    <script src="/js/plugins/spectrum/spectrum.js"></script>
    <script src="/js/plugins/spectrum/docs.js?v=ffdsaf"></script>
    <script>
        $(document).ready(function () {
            init_spectrum();
            var selector = $("input[name='version[]']");
            /*  var im = new Inputmask("99-9999999");
             im.mask(selector);*/
            Inputmask("9{1,2}.9{1,2}.9{1,2}").mask(selector);
            /*  Inputmask("9", { repeat: 10 },).mask(selector);*/

            var ex_int = /^\d+$/;
            var ex_version = /^\d{1,2}.\d{1,2}.\d{1,2}$/;

            $('.full-height-scroll').slimScroll({
                height: '100%'
            });
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });

            $("select[name='info[type]']").change(function () {
                var _template ='<div class="radio"> <label>'+
                        '<input class="i-checks" type="radio"  value="VAL" name="info[target_id]">'+
                        'TITLE</label></div>';

                var reg_val = /VAL/g;
                var reg_title = /TITLE/g;

                var int_curpage = $("#cur-page").data('val') ;

                console.log({{$typeCustom}});
                if($(this).val() != {{$typeCustom}} ){
                    $("#cutom-url-container").hide();
                    $("#target-group").show();
                    $.ajax({
                        url:'/ceb/advertistment/getTargetList',
                        dataType:'json',
                        type:'get',
                        data:{type:$(this).val(),page:int_curpage},
                        beforeSend:function () {
                            $("#loading").show();
                            $("#target-list-container").html('');
                        },
                        success:function (data) {
                            var list = data['data']['list'];
                            $("#target-list-container").html('');
                            $.each(list,function(index,value){
                                console.log(value);
                                var content= '';
                                content=_template.replace(reg_val,value['id']);
                                content=content.replace(reg_title,value['title']);
                                $("#target-list-container").append(content);
                            });
                            $("input[name='info[target_id]']:eq(0)").attr("checked",'checked');
                            $('.i-checks').iCheck({
                                checkboxClass: 'icheckbox_square-green',
                                radioClass: 'iradio_square-green',
                            });
                            $('.full-height-scroll').slimScroll({
                                height: '100%'
                            });

                            $("#next-page").data('val', data['data']['nextPage']);
                            $("#per-page").data('val', data['data']['perPage']);
                            if($("#cur-page").data('val') ===1 ){
                                $("#per-page").attr('disabled',true);
                            }else{
                                $("#per-page").attr('disabled',false)
                            }
                            if($("#cur-page").data('val') ===data['data']['pageCount']){
                                $("#next-page").attr('disabled',true);
                            }else{
                                $("#next-page").attr('disabled',false);
                            }
                            $("#cur-page").data('val',1);
                        },
                        complete:function () {
                            $("#loading").hide();
                        }
                    });
                }
                else{
                    $("#cutom-url-container").show();
                    $("#target-group").hide();
                }
            });

            $("._clik-page").click(function () {
                var val = $(this).data('val');
                $("#cur-page").data('val',val);
                $("select[name='info[type]']").trigger("change");
            });

            $("#btn-save").click(function () {

                var ex_int = /^\d+$/;

                var doc_title =$("input[name='info[title]']");
                if(doc_title.val().length==0){
                    doc_title.next().html('值不能为空');
                    doc_title.parents('.form-group').addClass('has-error');
                    return false;
                }
                doc_title.next().html('');
                doc_title.parents('.form-group').removeClass('has-error');

                //图片是否为空验证
                /*var doc_duration = $("input[name='info[img]']");
                if(doc_duration.val().length==0){
                    doc_duration.next().html('值不能空');
                    doc_duration.parents('.form-group').addClass('has-error');
                    return false;
                }
                doc_duration.next().html('');
                doc_duration.parents('.form-group').removeClass('has-error');*/


                var doc_duration = $("input[name='info[dur]']");
                if(doc_duration.val().length>0 && !ex_int.test(doc_duration.val())){
                    doc_duration.next().html('值必须为整数');
                    doc_duration.parents('.form-group').addClass('has-error');
                    return false;
                }
                doc_duration.next().html('');
                doc_duration.parents('.form-group').removeClass('has-error');

                var doc_duration = $("input[name='info[orders]']");
                if(doc_duration.val().length>0 && !ex_int.test(doc_duration.val())){
                    doc_duration.next().html('值必须为整数');
                    doc_duration.parents('.form-group').addClass('has-error');
                    return false;
                }
                doc_duration.next().html('');
                doc_duration.parents('.form-group').removeClass('has-error');


                var doc_select = $("select[name='info2[type]']");
                if( doc_select.val() == {{$typeCustom}}){
                    if($("input[name='info[jumpUrl]']").val().length==0){
                        $("input[name='info[jumpUrl]']").next().html('值不能为空');
                        $("input[name='info[jumpUrl]']").parents('.form-group').addClass('has-error');
                        return false;
                    }
                    $("input[name='info[jumpUrl]']").next().html('');
                    $("input[name='info[jumpUrl]']").parents('.form-group').removeClass('has-error');
                }
                $(this).attr('disabled',true);
                $('form').submit();
            });

            //版本管理

            $("#version-down").change(function() {
                var versionDown = $("#version-down").val();
                $("#version-up option").each(function () {
                    var versionUp =  $(this).val();
                    if(!versionInerval(versionDown,versionUp)){
                        $(this).attr('disabled',true);
                        $(this).addClass('text-warning');

                    }else {
                        $(this).attr('disabled',false);
                        $(this).removeClass('text-warning');
                    }
                });
            });
            $("#version-up").change(function() {
                var versionUp = $("#version-up").val();
                $("#version-down option").each(function () {
                    var versionDown = $(this).val();
                    if(!versionInerval(versionDown,versionUp)){
                        $(this).attr('disabled',true);
                        $(this).addClass('text-warning');
                    }
                    else {
                        $(this).attr('disabled',false);
                        $(this).removeClass('text-warning');
                    }
                });
            });

            function versionInerval(versionDown, versionUp){
                var arrayDown = versionDown.split('.',3)
                var arrayUp = versionUp.split('.',3);
                if(parseInt(arrayUp[0]) > parseInt(arrayDown[0])){
                    return true;
                }else if(parseInt(arrayUp[0]) == parseInt(arrayDown[0])){
                    if(parseInt(arrayUp[1]) > parseInt(arrayDown[1])){
                        return true;
                    }else if(parseInt(arrayUp[1]) == parseInt(arrayDown[1])){
                        if(parseInt(arrayUp[2]) > parseInt(arrayDown[2])){
                            return true;
                        }
                    }
                }
                return false;
            };

            var uphead="{{$upyunPre}}";
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: '/js/Uploader.swf',
                // 文件接收服务端。
                server: '/common/files/upload',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                fileNumLimit: 1,
                pick: {
                    id: '#upload-btn',
                    multiple: false,
                },
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    /* mimeTypes: 'image/!*'*/
                    mimeTypes: 'image/jpg,image/jpeg,image/png'   //修改这行
                },
//            sendAsBinary: true,
                method: "post",
            }).on('uploadSuccess', function (file, result) {
                if (result.code == 1) {
                    console.log(result['data']['src']);
                    $("input[name='info[img]']").val(result['data']['src']);
                    $("#img-thumb").attr('src',uphead+result['data']['src'])
                } else {
                    alert(result.message);
                }
            }).on('uploadBeforeSend', function (object, data, headers) {
                this.reset();
                headers['X-XSRF-TOKEN'] = $.cookie('XSRF-TOKEN');
            });

        });
    </script>
@endsection

